<template>
	<view class="">
		<!-- 头部商品安全溯源 -->
		<template v-if="show_content">
			<view class="banner-top" v-if="!loading">
				<view class="sources"></view>
				<text class="text-source">商品安全溯源</text>
				<view class="circle-one circle"></view>
				<view class="circle-two circle"></view>
				<view class="circle-three circle"></view>
			</view>
		</template>
		<!-- 商品信息 -->
		<view class="main_container" v-if="show_content">
			<view class="main_container_body" v-if="!loading">
				<view class="source-top-message"><text class="h5">商品信息</text></view>
				<view class="header_container">
					<view class="img">
						<image :src="data.pic" class="imgs" mode=""></image>
					</view>
					<view class="goods-name">
						<text class="goods-title">{{ data.name }}</text>
						<view class="goods-centent">{{ data.describe || '暂无描述' }}</view>
					</view>
				</view>
				<view class="info_container">
					<view class="content">
						<view class="item" v-for="item in list" :key="item.value">
							<text class="title">{{ item.label }}</text>
							<text class="content_inside">{{ data[item.value] }}</text>
						</view>
						<!-- <view class="item newitem">
							<text class="title">产地</text>
							<text class="content_inside">{{ data.madein }}</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 查询信息 -->
		<template v-if="show_content">
			<view class="source-message" v-if="!loading">
				<view class="source-h5">
					<text class="source-name">查询信息</text>
				</view>
				<view class="step column_start">
					<div class="step-info row_between" v-for="(item, index) in queryList" :key="index">
						<span>{{ item.name }}</span>
						<span>1212121212121</span>
					</div>
				</view>
			</view>
		</template>
		<!-- 订单信息 -->
		<template v-if="show_content">
			<view class="source-message" v-if="!loading">
				<view class="source-h5">
					<text class="source-name">订单信息</text>
				</view>
				<view class="step column_start">
					<div class="step-info row_between" v-for="(item, index) in orderList" :key="index">
						<span>{{ item.name }}</span>
						<span>1212121212121</span>
					</div>
				</view>
			</view>
		</template>
		<!-- 供应商信息 -->
		<template v-if="show_content">
			<view class="source-message" v-if="!loading">
				<view class="source-h5">
					<text class="source-name">供应商信息</text>
				</view>
				<view class="step column_start">
					<div class="step-info1 row_between" v-for="(item, index) in supplierList" :key="index">
						<span>{{ item.name }}</span>
						<template v-if="item.type == 'img'">
							<div class="column_start">
								<div class="imgList" v-for="(list, inds) in item.imgList" :key="inds">
									<img :src="list" alt="">
								</div>
							</div>
						</template>
						<template v-else>
							5346543134651321
						</template>
					</div>
				</view>
			</view>
		</template>
		<!-- 检测信息 -->
		<template v-if="show_content">
			<view class="source-message" v-if="!loading">
				<view class="source-h5">
					<text class="source-name">检测信息</text>
				</view>
				<view class="step column_start">
					<div class="step-info1 row_between" v-for="(item, index) in detectionList" :key="index">
						<template v-if="item.type == 'img'">
							<div class="column_start">
								<div class="detectionList">
									<img :src="item.imgList" alt="">
								</div>
							</div>
						</template>
						<template v-else>
							<span>{{ item.name }}</span>
							<span>5346543134651321</span>
						</template>
					</div>
				</view>
			</view>
		</template>
		<!-- 溯源过程 -->
		<template v-if="show_content">
			<view class="source-message" v-if="!loading">
				<view class="source-h5">
					<text class="source-name">溯源信息</text>
					<view @click="quality" class="quality"><text class="quality-h5">质检报告</text></view>
				</view>
				<view class="step">
					<view>
						<test :id="id"></test>
					</view>
				</view>
			</view>
		</template>

		<!-- 留样视频 -->
		<template v-if="show_content">
			<view class="source-message" v-if="!loading">
				<view class="source-h5">
					<text class="source-name">留样视频</text>
				</view>
				<view class="step column_start">
					<div class="step-info2 row_between">
						<view class="uni-padding-wrap uni-common-mt">
							<view>
								<!-- :danmu-list="danmuList" -->
								<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
									@error="videoErrorCallback" enable-danmu danmu-btn controls></video>
							</view>
							<!-- #ifndef MP-ALIPAY -->
							<!-- <view class="uni-list uni-common-mt">
								<view class="uni-list-cell">
									<view>
										<view class="uni-label">弹幕内容</view>
									</view>
									<view class="uni-list-cell-db">
										<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
									</view>
								</view>
							</view> -->
							<!-- <view class="uni-btn-v">
								<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
							</view> -->
							<!-- #endif -->
						</view>
					</div>
				</view>
			</view>
		</template>

		<!-- 企业资质 -->
		<template v-if="show_content">
			<view class="certification" v-if="!loading">
				<view class="source-h5"><text class="source-name">企业资质</text></view>
				<view class="source-img">
					<rich-text :nodes="datas"></rich-text>
				</view>
			</view>
		</template>
		<view class="" v-if="loading">
			<loading></loading>
		</view>
		<view class="" v-if="!show_content">
			<start :start_loading="start_loading" :pic="pic" @getStartData="getStartData"></start>
		</view>
	</view>
</template>

<script>
import parseHtml from '@/static/js/parseHtml.js';
import tabbar from './components/tabbar';
import start from './start';
import loading from './components/loading';
import {
	$https
} from '@/static/js/request.js';
import test from './test.vue';
const app = getApp().globalData;
export default {
	components: {
		tabbar,
		start,
		loading,
		test
	},
	data() {
		return {
			list: [{
				label: '单位',
				value: 'unit'
			},
			{
				label: '配送数量',
				value: 'sort_num'
			},
			{
				label: '配送单价',
				value: 'sort_price'
			},
			{
				label: '配送金额',
				value: 'sort_money'
			},
				// {
				// 	label: '保质期(天)',
				// 	value: 'exp'
				// },
				// {
				// 	label: '生产日期',
				// 	value: 'mfg'
				// }
			],


			queryList: [
				{
					name: '溯源编码'
				},
				{
					name: '当前查询次数'
				},
				{
					name: '首次查询时间'
				}
			],
			orderList: [
				{
					name: '下单客户'
				},
				{
					name: '下单数量'
				},
				{
					name: '发货数量'
				},
				{
					name: '归属单号'
				},
				{
					name: '退货数量'
				}
			],
			supplierList: [
				{
					name: '供应商资质',
					type: 'img',
					imgList: [
						'https://t9.baidu.com/it/u=1247042339,3187365599&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=6AA1984106433755553460BF0300D003&sec=1692118800&t=c0352eff37bbf1f6aa9ece7a43358e33',
						'https://t9.baidu.com/it/u=1247042339,3187365599&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=6AA1984106433755553460BF0300D003&sec=1692118800&t=c0352eff37bbf1f6aa9ece7a43358e33',
						'https://t9.baidu.com/it/u=1247042339,3187365599&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=6AA1984106433755553460BF0300D003&sec=1692118800&t=c0352eff37bbf1f6aa9ece7a43358e33'
					]
				},
				{
					name: '供应商',
					type: 'txt'
				},
				{
					name: '联系地址',
					type: 'txt'
				}
			],
			detectionList: [
				{
					type: 'img',
					imgList: 'https://t9.baidu.com/it/u=1247042339,3187365599&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=6AA1984106433755553460BF0300D003&sec=1692118800&t=c0352eff37bbf1f6aa9ece7a43358e33',
				},
				{
					name: '检测日期',
					type: 'txt'
				},
				{
					name: '送检机构',
					type: 'txt'
				},
				{
					name: '检测机构',
					type: 'txt'
				},
				{
					name: '检测员',
					type: 'txt'
				}
			],
			data: {},
			datas: {},
			show_content: false,
			start_loading: true,
			loading: false, //加载loading
			pic: '',
			id: ''
		};
	},
	onReady: function (res) {
		// #ifndef MP-ALIPAY
		this.videoContext = uni.createVideoContext('myVideo')
		// #endif
	},
	onLoad(options) {
		if (app.sourceShowStartPage) {
			this.show_content = false;
			this.start_loading = true;
		} else {
			this.show_content = true;
			this.loading = true;
			this.start_loading = false;
		}
		this.start_loading = false;
		this.id = options.id;
		// this.getData(options.id);
		// this.getDatas(options.id);
		// uni.setStorageSync('sourceId', options.id);
	},
	methods: {
		videoErrorCallback: function (e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			})
		},

		quality() {
			uni.navigateTo({
				url: './report'
			});
		},
		getData(id) {
			$https(
				'GETN',
				'traceResult', {
				order_list_id: id
			},
				res => {
					app.sourceShowStartPage = false;
					if (res.data.errcode == 0) {
						this.pic = res.data.data.pic;
						this.data = res.data.data;
						this.start_loading = false;
						this.loading = false;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				},
				true
			);
		},
		getStartData(data) {
			if (data.show_loading == false) {
				this.show_content = true;
			}
		},
		getDatas(id) {
			$https(
				'GETN',
				'companyQualification', {},
				res => {
					let result = res.data.data.content;
					let infos = this.formatRichText(result);
					this.datas = parseHtml(infos);
					this.datas[0].children = this.datas[0].children.filter(value => {
						return value.name == 'img';
					});
				},
				true
			);
		},
		formatRichText(html) {
			let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi,
				'<img style="width:29%;float: left;height:auto;display:block;margin-top:0;margin-bottom:0;padding:5px"'
			);
			return newContent;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #eff9f8;
	padding-bottom: 1rpx;
}

.banner-top {
	position: relative;
	width: 750rpx;
	height: 314rpx;
	background: url(@/static/image/suyuan1.png) no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	z-index: 999;
	margin: 0 auto;

	.sources {
		width: 164rpx;
		height: 194rpx;
		background: url(@/static/image/suyuan.png) no-repeat;
		background-size: 100% 100%;
		margin-left: 74rpx;
		margin-right: 84rpx;
	}

	.text-source {
		font-size: 52rpx;
		color: #ffffff;
		padding-bottom: 30rpx;
	}

	.circle-one {
		top: 0;
		left: 0;
		width: 26rpx;
		height: 26rpx;
	}

	.circle-two {
		top: 20rpx;
		left: 254rpx;
		width: 46rpx;
		height: 46rpx;
	}

	.circle-three {
		top: 230rpx;
		left: 382rpx;
		width: 78rpx;
		height: 78rpx;
	}

	.circle {
		position: absolute;
		background-color: #6ccea1;
		border-radius: 100%;
	}
}

.main_container_body {
	width: 670rpx;
	height: 816rpx;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 56rpx;
	border-radius: 32rpx;
	padding: 0 25rpx;
	box-shadow: 0px 2px 14px 0px rgba(14, 5, 9, 0.2);

	.source-top-message {
		width: 100%;
		height: 94rpx;
		border-bottom: 2rpx solid #e3e3e3;
		display: flex;
		justify-content: center;
		align-items: center;

		.h5 {
			font-size: 36rpx;
			color: #191919;
			font-weight: 600;
		}
	}

	.header_container {
		width: 100%;
		height: 180rpx;
		display: flex;
		margin-top: 53rpx;

		.img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 100%;
			border: 3px solid #ccc;
			overflow: hidden;

			.imgs {
				width: 100%;
				height: 100%;
			}
		}

		.goods-name {
			width: calc(620rpx - 202rpx);
			height: 180rpx;
			margin-left: 22rpx;
			display: flex;
			flex-direction: column;

			.goods-title {
				font-size: 44rpx;
				font-weight: 700;
				margin-bottom: 10rpx;
			}

			.goods-centent {
				font-size: 24rpx;
				color: #666666;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-all;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				display: -moz-box;
				/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
				display: -webkit-box;
				-moz-box-orient: vertical;
				/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
			}
		}
	}

	.info_container {
		width: 100%;
		height: 380rpx;
		margin-top: 54rpx;

		.content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 0 40rpx;

			.item {
				flex: 50%;
				height: 66rpx;
				display: flex;
				flex-direction: column;
				padding-left: 60rpx;

				.title {
					font-size: 28rpx;
					font-weight: 700;
					color: #181818;
					margin-bottom: 10rpx;
				}

				.content_inside {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}
}

.source-message {
	width: 670rpx;
	background-color: #ffffff;
	border-radius: 32rpx;
	margin: 58rpx auto;
	padding: 0 25rpx;
	box-shadow: 0px 2px 14px 0px rgba(14, 5, 9, 0.2);

	.source-h5 {
		position: relative;
		width: 100%;
		height: 90rpx;
		border-bottom: 2rpx #e3e3e3 solid;
		display: flex;
		justify-content: center;
		align-items: center;

		.source-name {
			font-size: 36rpx;
			font-weight: 700;
		}

		.quality {
			position: absolute;
			top: 25rpx;
			right: 25rpx;

			.quality-h5 {
				color: #666666;
				font-size: 24rpx;

				&::after {
					position: absolute;
					top: 15rpx;
					right: -16rpx;
					display: block;
					content: '';
					width: 12rpx;
					height: 12rpx;
					border-top: 2rpx #666666 solid;
					border-right: 2rpx #666666 solid;
					transform: rotate(45deg);
				}
			}
		}
	}

	.step {
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		padding-bottom: 30rpx;

		&-info {
			align-items: center;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1rpx solid #e1e1e1;
		}

		&-info1 {
			align-items: flex-start;
			line-height: 60rpx;
			border-bottom: 1rpx solid #e1e1e1;
		}

	}

}

.certification {
	width: 670rpx;
	height: auto;
	background-color: #ffffff;
	border-radius: 32rpx;
	margin: 0 auto;
	margin-bottom: 58rpx;
	padding: 0 25rpx;
	box-shadow: 0px 2px 14px 0px rgba(14, 5, 9, 0.2);

	.source-h5 {
		position: relative;
		width: 100%;
		height: 90rpx;
		border-bottom: 2rpx #e3e3e3 solid;
		display: flex;
		justify-content: center;
		align-items: center;

		.source-name {
			font-size: 36rpx;
			font-weight: 700;
		}
	}

	.source-img {
		width: 100%;
		height: auto;
		padding: 20rpx;
		overflow: hidden;
	}
}

.imgList {
	width: 300rpx;
	height: 200rpx;
	margin-bottom: 20rpx;

	img {
		width: 100%;
		height: 100%;
	}
}

.detectionList {
	width: 100%;
	height: 800rpx;
	margin-bottom: 20rpx;

	img {
		width: 100%;
		height: 100%;
	}
}
</style>
